import React from 'react';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import QueueAnim from 'rc-queue-anim';
import { Table } from 'antd';

class Pricing2 extends React.PureComponent {
  render() {
    const { ...props } = this.props;

    return (
      <div {...props} className="home-page-wrapper pricing2-wrapper">
        <div className="home-page pricing2">
          <div key="title" className="pricing2-title-wrapper">
            <h1 className="pricing2-title-h1">价目表</h1>
          </div>
          <OverPack playScale={0.3} className="pricing2-content-wrapper">
            <QueueAnim
              type="bottom"
              leaveReverse
              ease={['easeOutQuad', 'easeInOutQuad']}
              key="content"
            >
              <Table 
                key="table" 
                size="default" 
                className="pricing2-table" 
                columns={[
                  {
                    align: 'center',
                    dataIndex: 'name',
                    key: 'name',
                    title: (
                      <div>
                        <div name="name"> </div>
                        <div name="content"> </div>
                      </div>
                    ),
                  },
                  {
                    align: 'center',
                    dataIndex: 'free',
                    key: 'free',
                    title: (
                      <div className="pricing2-table-name-block">
                        <div className="pricing2-table-name">Free</div>
                        <div className="pricing2-table-money">¥0</div>
                        <div name="button">
                          <a href="#">免费试用</a>
                        </div>
                      </div>
                    ),
                  },
                  {
                    align: 'center',
                    dataIndex: 'basic',
                    key: 'basic',
                    title: (
                      <div className="pricing2-table-name-block">
                        <div className="pricing2-table-name">Basic</div>
                        <div className="pricing2-table-money">¥550</div>
                        <div name="button">
                          <a href="#">立即购买</a>
                        </div>
                      </div>
                    ),
                  },
                  {
                    align: 'center',
                    dataIndex: 'pro',
                    key: 'pro',
                    title: (
                      <div className="pricing2-table-name-block">
                        <div className="pricing2-table-name">Pro</div>
                        <div className="pricing2-table-money">¥2,200</div>
                        <div name="button">
                          <a href="#" type="primary">立即购买</a>
                        </div>
                      </div>
                    ),
                  },
                  {
                    align: 'center',
                    dataIndex: 'unlimited',
                    key: 'unlimited',
                    title: (
                      <div className="pricing2-table-name-block">
                        <div className="pricing2-table-name">Unlimited</div>
                        <div className="pricing2-table-money">¥5,600</div>
                        <div name="button">
                          <a href="#">立即购买</a>
                        </div>
                      </div>
                    ),
                  },
                ]} 
                dataSource={[
                  {
                    key: '0',
                    name: (
                      <div className="pricing2-table-content-name">实例系列1</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">Limited</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                  },
                  {
                    key: '1',
                    name: (
                      <div className="pricing2-table-content-name">实例系列2</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">Limited</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                  },
                  {
                    key: '2',
                    name: (
                      <div className="pricing2-table-content-name">固定宽带计费</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">50GB</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">250GB</div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">600GB</div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">Unlimited</div>
                    ),
                  },
                  {
                    key: '3',
                    name: (
                      <div className="pricing2-table-content-name">闲置负载均衡</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                  },
                  {
                    key: '4',
                    name: (
                      <div className="pricing2-table-content-name">4核</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                  },
                  {
                    key: '5',
                    name: (
                      <div className="pricing2-table-content-name">系统盘（线性计费）</div>
                    ),
                    free: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    basic: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    pro: (
                      <div className="pricing2-table-content">-</div>
                    ),
                    unlimited: (
                      <div className="pricing2-table-content">
                        <img src="/images/14ce3060-34e6-4b30-9a45-1a6b95542310.svg" alt="img" />
                      </div>
                    ),
                  },
                ]} 
                pagination={false} 
                bordered 
              />
            </QueueAnim>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default Pricing2;
